<template>
  <div>
    <div class="fcRightBox">
      <div class="fcHeader">
        <div class="fcHeader-title-container">
          <div class="left-part">
            <div class="title">计划报告</div>
            <div class="refresh-data-time"></div>
          </div>
          <div class="right-part">
                        <span class="baidu-market-tip">下载<a
                            href="https://mobile2.baidu.com/index.html?navfrom=fcreport" target="_blank"
                            rel="noreferrer"><span
                            class="baidu-market-name">百度营销APP</span></a>，手机端随时随地看数据</span>
            <div class="fcHeader-date-pick-container">

              <el-date-picker class="custom-date-picker"
                              format="yyyy/MM/dd"
                              v-model="timerArray"
                              style="width: 240px"
                              type="daterange"
                              align="right"
                              range-separator="~"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              @change="queryList"
                              :picker-options="pickerOptions">
                <template slot="prefix">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" min-width="24" height="24"
                       class="custom-icon" focusable="false">
                    <path fill="currentColor"
                          d="M9 1.5H7V3h-.5a5 5 0 0 0-5 5v9.4a5 5 0 0 0 5 5h11a5 5 0 0 0 5-5V8a5 5 0 0 0-5-5H17V1.5h-2V3H9V1.5zM15 5H9v1.5H7V5h-.5a3 3 0 0 0-3 3v.5h17V8a3 3 0 0 0-3-3H17v1.5h-2V5zm5.5 5.5h-17v6.9a3 3 0 0 0 3 3h11a3 3 0 0 0 3-3v-6.9z"></path>
                  </svg>
                </template>
              </el-date-picker>

              <el-checkbox v-model="checked">比较</el-checkbox>
            </div>

          </div>
        </div>
        <div style="margin-top: 10px">
          <el-select v-model="form.sumWay" placeholder="请选择" class="fcSelect" @change="queryList()">
            <span slot="prefix" class="select-prefix">时间单位:</span>
            <el-option v-for="item in sumWaySelectList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"></el-option>

          </el-select>

          <el-select v-model="form.promotionDevice" placeholder="请选择" class="fcSelect"
                     @change="queryList()">
            <span slot="prefix" class="select-prefix">推广设备：</span>
            <el-option
                v-for="item in promotionDeviceSelcetList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
          <span style="color: #0054e6;font-size: 14px"> 更多筛选</span>
        </div>
      </div>
      <div
          class="light-ai report-sdk-smart-query-area-container light-ai-card light-ai-card-medium light-ai-card-strong">
        <div class="light-ai light-ai light-ai-card-header light-ai-slot light-ai-group" style="gap: 50px;">
          <div class="light-ai light-ai-card-header-main light-ai-slot-main">智能数据查询</div>
        </div>
        <div class="light-ai-card-body">
          <div
              class="light-ai light-ai light-ai light-ai-omni-input light-ai-omni-input-medium light-ai-slot light-ai-slot-vertical light-ai-group light-ai-group-gap-xsmall">
            <div class="light-ai light-ai-slot-main">
              <div
                  class="light-ai light-ai light-ai-omni-input-main light-ai-slot light-ai-group light-ai-group-gap-medium">
                <div class="light-ai light-ai-slot-main">
                  <div class="light-ai light-ai-rich-input"
                       style="--internal-light-ai-min-rows: 1; --internal-light-ai-max-rows: 5;">
                    <div contenteditable="true" translate="no" class="tiptap ProseMirror"
                         tabindex="0"><p class="is-empty is-editor-empty"><br
                        class="ProseMirror-trailingBreak"></p></div>
                  </div>
                </div>
                <div class="light-ai light-ai-omni-input-after light-ai-slot-after"
                     style="display: flex;align-items: center;justify-content: space-between">
                  <div style="display: inline-block;height: 25px;line-height: 25px">
                    <span
                        class="light-ai light-ai-text light-ai-text-aux light-ai-text-medium">0</span><span
                      class="light-ai light-ai-text light-ai-text-aux light-ai-text-medium">/100</span></div>
                  <button style="margin-left: 10px;font-size: 24px;"
                          class="light-ai light-ai-omni-input-send light-ai-button light-ai-button-medium light-ai-button-icon light-ai-button-icon-medium light-ai-button-disabled light-ai-button-icon-only"
                          type="button" disabled="">

                    <svg fill="none" viewBox="0 0 24 24" min-width="24" height="24"
                         class="dls-icon light-ai-omni-input-send-icon dls-icon-active"
                         focusable="false">
                      <g stroke-width="2">
                        <path
                            d="m20.7163 11.2981-16.19439-8.85633c-.62917-.34407-1.35838.24963-1.14899.93549l2.56119 8.38934c.04648.1522.04648.3149 0 .4671l-2.56117 8.389c-.20939.6859.51981 1.2796 1.14899.9355l16.19437-8.8563c.5549-.3034.5549-1.1004 0-1.4038z"
                            fill="currentColor" stroke="currentColor"></path>
                        <path d="m4.5 12h9" stroke="#fff"></path>
                      </g>
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <p>
          <div class="radio-tag-groups-select-container">
            <div class="radio-tag-groups">
              <div class="radio-tag-groups-container">
                <div class="radio-tag-groups-name"><span>猜你想搜：</span></div>
                <div
                    class="light-ai light-ai radio-tag-groups-tag-group-container light-ai-tag-group light-ai-group light-ai-group-gap-xsmall">
                  <div class="light-ai radio-select-item light-ai-tag light-ai-tag-bubble"
                       tabindex="0"><span class="light-ai-tag-main">转化率最高的3个出价策略</span></div>
                  <div class="light-ai radio-select-item light-ai-tag light-ai-tag-bubble"
                       tabindex="0"><span class="light-ai-tag-main">起量预算最高的3个出价策略数据</span></div>
                  <div class="light-ai radio-select-item light-ai-tag light-ai-tag-bubble"
                       tabindex="0"><span class="light-ai-tag-main">目标转化量最高的出价策略数据</span></div>
                </div>
              </div>
            </div>
          </div>
          <button type="button" name="" class="one-button one-main one-button-text-strong one-button-medium">
                        <span><span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" min-width="24"
                                         height="24" class="dls-icon icon-sync" focusable="false"
                                         style="margin-top: 15px"><path
                            fill="currentColor"
                            d="M11.973 1C5.953 1 1.092 5.936 1.092 12h2c0-4.982 3.987-9 8.881-9 2.717 0 5.153 1.237 6.785 3.192l-.576.333a.5.5 0 0 0 .048.89l2.803 1.241a.5.5 0 0 0 .698-.391l.413-3.098a.5.5 0 0 0-.746-.499l-.887.512C18.521 2.638 15.438 1 11.973 1zm11.119 11c0 6.064-4.861 11-10.882 11-3.465 0-6.548-1.637-8.538-4.18l-.887.512a.5.5 0 0 1-.746-.5l.413-3.097a.5.5 0 0 1 .698-.391l2.804 1.24a.5.5 0 0 1 .047.89l-.576.334C7.057 19.764 9.493 21 12.21 21c4.894 0 8.882-4.018 8.882-9h2z"></path></svg>换一换</span></span>
          </button>
          </p><p></p></div>
      </div>
      <div class="fcHeader-container fcHeader-container-custom-dash">
        <div v-show="isShowChart">
          <div class="contentHeader">
            <p>TOP5计划</p>
            <div class="contentHeader_right contentHeader_right_xiaofei" style=" justify-content: flex-end;">
                    <el-select style="width: 120px;margin-left: 10px" @change="queryList" v-model="form.sumType"
                               placeholder="请选择" class="select-with-prefix">
                      <el-option
                          v-for="item in sumTypeList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>

                  </div>
          </div>
          <div style="display: flex;align-items: flex-start;justify-content: space-between;overflow: hidden">
            <div style="width: 49%"><span class="report-sdk-small-table-tab-item" style="margin-bottom: 10px">TOP5计划消费占比</span>

              <el-table :data="tableListTop5.planTop5" >
                <el-table-column prop="name" label="排名" min-width="60">
                  <template slot-scope="scope">
                    {{ getIndex(scope.$index) }}
                  </template>
                </el-table-column>
                <el-table-column prop="planName" label="计划名称" min-width="240"></el-table-column>
                <el-table-column prop="consumption" label="消费" v-if="form.sumType=='消费'" align="right"></el-table-column>
                <el-table-column prop="toShow" label="展示" v-if="form.sumType=='展示'" align="right"></el-table-column>
                <el-table-column prop="avgClickPrice" label="平均点击价格" v-if="form.sumType=='平均点击价格'" align="right"></el-table-column>
                <el-table-column prop="click" label="点击" v-if="form.sumType=='点击'" align="right"></el-table-column>

                <el-table-column prop="proportion" min-width="90" label="占比" align="right"></el-table-column>
              </el-table></div>

            <div ref="chart" style="width: 49%;height: 400px;margin-left: 20px"></div>
          </div>
        </div>

        <div class="">
          <div class="contentHeader">
            <el-input placeholder="请搜索推广计划" style="width: 180px" v-model="form.searchTerm"><i slot="suffix"
                                                                                              class="el-input__icon el-icon-search"></i>
            </el-input>
            <div class="contentHeader_right" style="justify-content: flex-end">
              <el-dropdown @command="handleCommand" trigger="click" style="margin-right: 16px">
                <el-button style="width: 160px;padding: 6px;text-align: left">
    <span style="display:inline-block;width: 120px;color: rgba(19, 22, 26, 0.9);font-size: 12px">
      <i v-if="!selectedDivision">细分</i><i v-else>细分：</i>{{ selectedDivision }}
    </span>
                  <i class="el-icon-arrow-down el-icon--right" style="color: rgba(19, 22, 26, 0.9)"> </i>
                </el-button>

                <!-- 平铺菜单项 -->
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="hour">小时</el-dropdown-item>
                  <el-dropdown-item command="purchase">购买方式</el-dropdown-item>
                  <el-dropdown-item command="device">推广设备</el-dropdown-item>
                  <el-dropdown-item command="province">分省</el-dropdown-item>
                  <el-dropdown-item command="city">分地市</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-dropdown  style="margin-right: 16px">
                <el-button type="primary"
                           style="width: 101px; font-size: 12px;height: 28px;line-height: 28px;padding: 0; background-color: #e2e6f0;color: #000; border: 1px solid #dfe4ea; ">
                  <span style="display: inline-block;height: 100%;border-right:1px solid #c9c9c9;padding-right: 12px"> {{
                      value11
                    }}</span>

                  <i style="color: #3b3b3b;font-weight: 600" class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="item in options11" :key="item.value">{{ item.label }}</el-dropdown-item>

                </el-dropdown-menu>
              </el-dropdown>
              <el-select style="margin-right: 16px;" v-model="value" placeholder="请选择" class="select-with-prefix1">
                <el-option
                    v-for="item in options2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
              <el-button class="rightBt" style="padding: 6px 12px;margin-right: 8px;" @click="handleTabClick">重置列宽</el-button>
              <el-button v-if="isShowChart" @click="isShowChart=false" style="padding: 6px 12px;">收起图表
              </el-button>
              <el-button v-else @click="isShowChart=true" style="padding: 7px 12px;">展开图表</el-button>
            </div>
          </div>
          <el-table border
              :data="tableList"
              style="width: 100%;background: #EBEDF5"
              :default-sort="{prop: 'date', order: 'descending'}"
          >
            <el-table-column
                prop="createTime"
                label="日期"     sortable
                align="left"
                min-width="180">
            </el-table-column>
            <el-table-column
                align="left"
                prop="userName"
                label="账户"
                sortable
                min-width="180">
            </el-table-column>
            <el-table-column
                align="left"
                prop="planName"
                min-width="180"
                label="推广计划"  sortable
            >

            </el-table-column>

            <el-table-column
                prop="toShow"
                align="right"
                label="展现
"
                sortable
                min-width="180">
            </el-table-column>
            <el-table-column
                prop="click"
                align="right"
                label="点击
"
                sortable
                min-width="180">
            </el-table-column>
            <el-table-column
                align="right"
                prop="consumption"
                label="消费"  sortable
            >
            </el-table-column>
            <el-table-column
                prop="clickRate"
                label="点击率"align="right"
                min-width="120"  sortable
            >
              <template slot-scope="scope">
                {{ scope.row.clickRate }}%
              </template>
            </el-table-column>
            <el-table-column
                prop="avgClickPrice"
                label="平均点击价格

"align="right"
                sortable
                min-width="130">
            </el-table-column>


          </el-table>
          <div
              style="height: 80px;display: flex;align-items: center;justify-content: flex-end;width: 100%;margin-top: 10px;line-height: 80px">
            <div>
              <el-pagination background
                             style="min-width: 380px;height: 80px;ox-sizing: border-box;padding-top: 23px"
                             @size-change="handleSizeChange"
                             @current-change="handleCurrentChange"
                             :current-page="form.pageNum"
                             :page-size="form.pageSize"
                             :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
                             layout="sizes, prev, pager, next,jumper"
                             :total="form.total"
              ></el-pagination>
            </div>
            <div style="display: block">
              <el-button
                  style="display: block;margin-left: 0px; background: #ebedf5;border-color: #ebedf5;color: rgba(19, 22, 26, 0.9);"
                  type="primary" size="small" @click="queryList">确定
              </el-button>

            </div>

          </div>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
import ItemMixins from "./item.mixins";
import * as echarts from 'echarts';
import {getPlanReportList, getQueryPlanTop5} from '@/services/model/datacenter'

export default {
  mixins: [ItemMixins],
  data() {
    return {


      isToggleStatus: false,
      selectedDivision: '',
      chart: null,
      sumTypeList: [{
        value: '消费',
        label: '消费'
      }, {
        value: '展示',
        label: '展示'
      }, {
        value: '点击',
        label: '点击'
      }, {
        value: '平均点击价格',
        label: '平均点击价格'
      }],
      value:'下载',
      options2: [{
        value: '下载',
        label: '下载'
      }, {
        value: '发送邮箱',
        label: '发送邮箱'
      }],
      options: [{
        value: 0,
        label: '合计'
      }, {
        value: 1,
        label: '分时'
      }, {
        value: 2,
        label: '分日'
      }, {
        value: 3,
        label: '分周'
      }, {
        value: 4,
        label: '分月'
      }],
      isSelect: '账户整体',
      activeName: '整体走势',

    };
  },
  methods: {
    async queryList() {
      this.tableList = []
      this.tableListTop5 = []
      this.form.createTime = this.formatDate(this.timerArray[0]);
      this.form.updateTime = this.formatDate(this.timerArray[1]);
      let resTop = await getQueryPlanTop5(this.form)
      this.tableListTop5 = resTop.data || []
      if(this.tableListTop5.length==0){
        this.isShowChart=false
      }else {
        this.isShowChart=true
      }
      let res = await getPlanReportList(this.form)
      const modifiedArray = this.replaceNullWithDash(res.rows);
      this.tableList = modifiedArray || []

      this.form.total = Math.ceil(Number(res.total));
      this.initChart();
    },

    initChart() {
      if (this.chart) {
        // 清理旧的图表实例
        this.chart.clear();
      } else {
        const chartDom = this.$refs.chart;
        this.chart = echarts.init(chartDom);
      }

      const xData = [];
      const seriesData = [];
      let maxVal = 0;
let name=this.tableListTop5.planTrendTop5.length!==0?this.tableListTop5.planTrendTop5[0].planName:''
      if (this.tableListTop5.planTrendTop5.length > 0) {
        this.tableListTop5.planTrendTop5.forEach(x => {
          xData.push(x.createTime);
          seriesData.push(x.sumNumber);
          if (x.sumNumber > maxVal) {
            maxVal = x.sumNumber;
          }
        });
      }

      let yAxisInterval = seriesData.length > 0 ? this.calculateYAxisInterval(maxVal) : 100;
      let yAxisMax = seriesData.length > 0 ? Math.ceil(maxVal / yAxisInterval) * yAxisInterval : 500;

console.log(seriesData)
      const option = {
        title: {
          text: seriesData.length > 0 ?'TOP5推广计划趋势':'',
          left: 'left',
          textStyle: {
            fontSize: 14,
            fontFamily: 'Arial',
            fontWeight: '500',
            color: '#000'
          }
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#fff', // 背景颜色
          borderColor: '#ccc', // 边框颜色
          borderWidth: 1, // 边框厚度
          textStyle: {
            color: '#333', // 文本颜色
          },
          formatter: params => {

            let content = `<div style="padding: 10px; line-height: 1.5;">${params[0].axisValue}</div>`;
            params.forEach(item => {
              console.log(item)
              content += `
              <div style="margin-top: 6px">
                <span style="display: inline-block; width: 12px; height: 4px; background-color: ${item.color}; border-radius: 20px; margin-right: 6px;margin-bottom: 3px"></span>
                ${item.seriesName}: ${item.data} 元
              </div>
            `;
            });
            return content;
          },
          extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);' // 自定义额外的样式，如阴影等
        },
        legend: {
          data: [
            // {
            //   name: '激活[已删除]',
            //   icon: 'path://M0,0 h25 a12.5,12.5 0 0 1 12.5,12.5 v0 a12.5,12.5 0 0 1 -12.5,12.5 h-25 a12.5,12.5 0 0 1 -12.5,-12.5 v0 a12.5,12.5 0 0 1 12.5,-12.5', // 使用自定义 path 实现 100% 圆角矩形图例
            //   textStyle: {
            //     color: '#545b66'
            //   }
            // },
            {
              name: name,
              icon: 'path://M0,0 h25 a12.5,12.5 0 0 1 12.5,12.5 v0 a12.5,12.5 0 0 1 -12.5,12.5 h-25 a12.5,12.5 0 0 1 -12.5,-12.5 v0 a12.5,12.5 0 0 1 12.5,-12.5', // 自定义 path
              textStyle: {
                color: '#545b66'
              }
            },
          ],
          top: 30,
          left: 0,
          itemGap: 10, // 设置图例之间的间距
          itemWidth: 12, // 设置图例标记的宽度
          itemHeight: 4, // 设置图例标记的高度
        },

        xAxis: {
          type: 'category',
          axisTick: {
            show: false
          },
          axisLabel: {
            formatter: (value, index) => {
              console.log(value)
              // 如果是最早或最晚日期，则不显示
              if (index === 0 || index === xData.length - 1) {
                return '';
              }
              return value;
            },
          },
          axisLine: {
            lineStyle: {
              color: 'rgb(165,165,176)'
            }

          },
          data: xData
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: 'rgb(165,165,176)'
            }

          },
          show: seriesData.length > 0,
          type: 'value',
          interval: yAxisInterval,
          min: 0,
          max: yAxisMax,
          axisLabel: {
            formatter: '{value}'
          }
        },
        series: seriesData.length > 0 ? [{
          name:  name,
          type: 'line',
          lineStyle: {
            color: '#00aaff'
          },
          itemStyle: {
            color: '#00aaff',

          },
          showSymbol: false,
          data: seriesData
        },
        //   {
        //   name: '激活[已删除]',
        //   type: 'line',
        //   lineStyle: {
        //     color: '#00aaff'
        //   },
        //   itemStyle: {
        //     color: '#00aaff',
        //
        //   },
        //   showSymbol: false,
        //   data: 0
        // },
        ] : []
      };

      // 如果没有数据，添加 '暂无数据' 提示，并清空 series
      if (seriesData.length === 0) {
        option.series = [];
        option.graphic = {
          type: 'text',  // 确保 type 属性已设置
          left: 'center',
          top: 'middle',
          style: {
            text: '暂无数据',
            fontSize: 14,
            fontWeight: '500',
            fill: '#282c33'
          }
        };
      }
      this.chart.setOption(option);
    },



    handleClick(tab, event) {
      console.log(tab, event);
    }
  },
  mounted() {

    this.queryList()
  },
};
</script>
<style>
</style>
<style scoped lang="less">
.fcRightBox {
  height: 100%;
  width: calc(100vw - 240px);

  .fcHeader {
    background: #fff;
    border-radius: 6px;
    padding: 16px 24px 20px;
    margin-bottom: 24px;

    .fcHeader-title-container {

      position: relative;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;

      .left-part {

        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;

        .title {
          font-size: 20px;
          color: #282c33;
        }

        .refresh-data-time {
          display: inline-block;
          margin-bottom: 4px;
        }

      }

      .right-part {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;

        .baidu-market-tip {
          color: #a8b0bf;
          font-size: 12px;

          .baidu-market-name {
            color: #0052cc;
          }
        }

        .fcHeader-date-pick-container {
          margin-left: 12px;
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          align-items: center;

          /deep/ .el-checkbox {
            margin-left: 12px;
          }
        }
      }
    }
  }

  .fcHeader-container-custom-dash {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
  }

  .fcHeader-container {
    position: relative;
    background: #fff;
    border-radius: 6px;
    padding: 24px;
    padding-top: 12px;

    .fcHeader-container-title-box {
      position: absolute;
      right: 24px;
      top: 20px;
      height: 28px;
      display: flex;
      align-items: center;

      .fcHeader-container-title-tip {
        font-size: 12px;
        color: #a8b0bf;
        z-index: 9;
      }
    }
  }

  .account-report-radio-container {
    width: calc(100% - 48px);
    display: flex;

    overflow: auto;

    .account-report-radio-card {
      min-width: 208px;
      padding: 12px 16px;
      border-radius: 6px;
      border: 1px solid #c4daff;
      background: #fff;
      margin-right: 16px;
      cursor: pointer;
      color: #545b66;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;

      .account-report-radio-card-base {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .account-report-radio-card-base-cost {
          display: flex;
          align-items: center;
          color: #282c33;
          font-weight: 500;

          .account-report-radio-card-base-cost-num {
            font-size: 20px;
            line-height: 28px;
            margin: 0 4px;
          }
        }
      }
    }

    .account-report-radio-card-selected {
      border: 1px solid #0054e6;
      color: #0054e6;

      .account-report-radio-card-base-cost {
        color: #0054e6;
      }
    }

  }
}
</style>
<style scoped>
.dashboard .box-card {
  margin-bottom: 20px;
}

.dashboard .text-item {
  padding: 20px 0;
  text-align: center;
}

.dashboard .number {
  font-size: 24px;
  color: #333;
}

.dashboard .change {
  font-size: 14px;
  color: #333;
}

.dashboard .change el-icon {
  color: #67C23A;
}

.chart {
  width: 100%;
}

.contentHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;

}

.contentHeader_right {
  min-width: 300px;
  display: flex;
  align-items: center;
  justify-content: space-between;

}

.report-sdk-small-table-tab {
  margin-bottom: 18px;
}

.report-sdk-small-table-tab-item {
  display: inline-block;
  font-size: 14px;
  color: #282c33;
  letter-spacing: 0;
  text-align: center;
  padding: 0 00px;
  padding-right: 20px;
  line-height: 20px;
  height: 14px;
}
</style>
